<template>
  <a-modal :footer="null" title="注册登陆" :open="openLoginModal" @ok="() => userStore.setOpenLoginModal(false)"
    @cancel="() => userStore.setOpenLoginModal(false)" width="500px">
    <div class="pt-5">
      <component :is="componentMap[activeKey]" />
      <div>
        <p class="text-center text-gray-500 mt-4" v-if="activeKey === 'login'">
          还没有账号？ <Button class="text-blue-500" @click="switchToRegister" type="link">注册</Button>
        </p>
        <p class="text-center text-gray-500 mt-4" v-if="activeKey === 'register'">
          已有账号？ <Button class="text-blue-500" @click="switchToLogin" type="link">登录</Button>
        </p>
      </div>
    </div>
  </a-modal>

</template>
<script setup>
import Login from './login.vue'
import Register from './register.vue'
import { ref, computed } from 'vue'
import { Button } from 'ant-design-vue'; // 导入组件库

import { useUserStore } from '../../../../stores/user'

const userStore = useUserStore()
const openLoginModal = computed(() => userStore.openLoginModal)

const componentMap = {
  login: Login,
  register: Register
}
const activeKey = ref('login')
const switchToRegister = () => {
  activeKey.value = 'register'
}
const switchToLogin = () => {
  activeKey.value = 'login'
}


</script>